<template>
  <div class="search">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @input="searchList"
        @cancel="onCancel"
        @blur="blurInput"
        @search="enterPush"
      />
    </form>
    <!-- 搜索数据展示 -->
    <div v-for="item in queryList" :key="item.goods_id">
      <van-row @click="pushGoodsList(item.goods_id)">
        <span class="text">{{item.goods_name}}</span>
        <van-divider/>
      </van-row>
    </div>
    <!-- 历史搜索记录 -->
    <van-row>
      <p class="pp">
        <span>历史记录:</span>
        <van-icon class="deleteIcon" name="delete" @click="deleteSearchIcon"/>
      </p>
      <van-tag
        round
        v-for="(item,index) in searchArray"
        :key="index"
        class="jilu"
        @click="seachByindex(index)"
      >{{item}}</van-tag>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      // 发送请求后得到的数据列表
      queryList: [],
      // 历史搜索记录列表
      searchArray: []
    };
  },
  mounted() {
    this.tagNum;
  },
  methods: {
    // input 输入时 发送请求 拿到数据
    async searchList() {
      const res = await this.$http.get(`/goods/qsearch?query=${this.value}`);

      if (res.meta.status == 200) {
        this.queryList = res.message;
      }
    },
    // input 取消输入
    onCancel() {
      // this.$toast.success("取消");
      this.queryList = "";
    },
    // input 失去焦点
    blurInput() {
      // 判断搜索内容是否为空，并且历史记录数组是否有这次输入的内容
      if (
        this.value.trim().length !== 0 &&
        this.searchArray.indexOf(this.value) == -1
      ) {
        // 先从本地存储拿到的数组赋值给搜索记录列表
        this.searchArray = this.tagNum;
        // 将input内容追加到数组开头
        this.searchArray.unshift(this.value);
        // 只准数组有十条历史记录
        this.searchArray = this.searchArray.slice(0, 10);

        const newStr = this.searchArray.join(",");

        window.sessionStorage.setItem("str", newStr);
      }
    },
    // 点击历史记录的关键字进行搜索
    seachByindex(i) {
      this.value = this.tagNum[i];
      this.searchList();
      this.value = "";
    },
    // 清空searchIcon
    deleteSearchIcon() {
      window.sessionStorage.clear();

      this.tagNum.splice(0, this.tagNum.length);
      this.searchArray = [];
    },
    // input 回车事件
    enterPush() {
      // 根据内容跳到商品列表页面
      this.$router.push(`/pages/goods_list?query=${this.value}`);
      this.value = "";
    },
    // 点击关键字展示的详情列表，跳转商品列表
    pushGoodsList(id) {
      // 传统方式传参
      this.$router.push(`/pages/goods_detail/:${id}`);
      // restful 风格传参
      // this.$router.push(`/pages/goods_detail/${id}`)
    }
  },
  // 计算属性
  computed: {
    // 从本地存储拿出Str 并转为数组
    tagNum() {
      let str = window.sessionStorage.getItem("str");
      // 判断本地存储是否有值，有数据转为数组，否则返回空数组
      if (str) {
        return str.split(",");
      } else {
        return [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  margin-top: 46px;
}
.text {
  font-size: 12px;
}
.pp {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  margin: 1px;
  font-size: 14px;
}
.deleteIcon {
  margin-top: 3px;
}
.jilu {
  margin-bottom: 2px;
  margin-left: 5px;
}
</style>